<template>
  <div>
    <div class="fourth-box">
      <div class="f-left">
        <div class="fl-top">
          <el-form :inline="true" :model="formInline" class="demo-form-inline form-style">
            <el-form-item label="知识点列表（6）">
              <el-input
                style="max-width: 600px"
                placeholder="请输入关键字"
                class="input-with-select"
              >
                <template #append>
                  <el-button type="primary">搜索</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <div class="flt-list">
            <el-card shadow="hover">
              <!-- <el-button type="primary" plain v-for="(item, index) in visibleItems" :key="index">{{
                item.word
              }}</el-button> -->
              <el-button type="primary" plain>知识点1</el-button>
              <el-button type="primary" plain>知识点1</el-button>
              <el-button type="primary" plain>知识点1</el-button>
              <el-button type="primary" plain>知识点1</el-button>
            </el-card>
          </div>
        </div>
        <div class="fl-bottom">
          <div class="button-container">
            <el-button>上一页</el-button>
            <el-button>下一页</el-button>
          </div>
        </div>
      </div>
      <div class="f-right">
        <div class="fr-top">
          <el-form :inline="true" :model="formInline" class="demo-form-inline form-style">
            <el-form-item label="描述设置"> </el-form-item>
          </el-form>
          <el-input
            v-model="textareaValue"
            type="textarea"
            resize="none"
            placeholder=""
            :autosize="{ minRows: 10, maxRows: 10 }"
          />
        </div>
        <div class="fr-bottom">
          <el-form :inline="true" :model="formInline" class="demo-form-inline form-style">
            <el-form-item label="查看文中位置-知识点2">
              <el-button type="primary" size="small">收起</el-button>
            </el-form-item>
          </el-form>
          <el-radio-group v-model="radioChapter" size="">
            <el-radio-button label="第一章" value="第一章" />
            <el-radio-button label="第二章" value="第二章" />
            <el-radio-button label="第三章" value="第三章" />

            <div style="margin-left: 30px;">
              <el-button>查找上一处</el-button>
              <el-button>查找下一处</el-button>
            </div>
          </el-radio-group>
          <el-input
            v-model="textareaValue"
            type="textarea"
            resize="none"
            placeholder=""
            :autosize="{ minRows: 10, maxRows: 10 }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
const radioChapter = ref('第一章')
const textareaValue = ref('')
const formInline = reactive({
  user: '',
  region: '',
  date: ''
})
</script>

<style scoped lang="scss">
.form-style {
  .el-form-item {
    margin: 0 0 10px 0;
  }
}

.fourth-box {
  display: flex;
  justify-content: space-between;
  height: 100%;
  .f-left {
    width: 50%;
    margin-right: 15px;

    .fl-top {
      margin-bottom: 10px;
    }

    .fl-bottom {
      width: 100%;
      height: 100%;
      //   background-color: #f8f9f8;
      position: relative;
      .button-container {
        position: absolute;
        top: 60%;
        right: 0;
      }
    }

    .flt-list {
      overflow-y: auto;
      height: 100px;
    }
  }

  .f-right {
    width: 50%;
    height: 100%;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .fr-top {
      height: 50%;
      margin-bottom: 10px;
    }

    .fr-bottom {
      height: 50%;

      ::v-deep(.el-textarea__inner) {
        height: 100%;
      }
    }
  }
}
</style>